package com.example.parkingsharing.ui.components.user

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavBackStackEntry
import androidx.navigation.NavHostController
import com.example.parkingsharing.R
import com.example.parkingsharing.data.BottomItem
import com.example.parkingsharing.data.ParkingSharingStrings.ContentDescription.ZH.userAvatar
import com.example.parkingsharing.data.mManagerItems
import com.example.parkingsharing.ui.components.management.CarManagement
import com.example.parkingsharing.ui.components.management.OrderManagement
import com.example.parkingsharing.ui.components.management.PointManagement
import com.example.parkingsharing.ui.components.management.SpotManagement
import com.example.parkingsharing.ui.theme.Teal200
import com.google.accompanist.insets.statusBarsHeight

@Composable
fun UserScreen(
    navController: NavHostController,
    backStackEntry: NavBackStackEntry,
    modifier: Modifier = Modifier,
    userAvatarID: Int = R.drawable.ic_baseline_crop_original_48
){
    var managerSelectedState by remember { mutableStateOf(0) }
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally //设置水平居中对齐
    ) {
        // 填充状态栏
        Spacer(modifier = Modifier
            .statusBarsHeight()
            .fillMaxWidth())

        UserIDCard(userAvatarID = userAvatarID)

        Manager(managerSelectedState) { index, item ->
                managerSelectedState = index
        }
        Box(modifier = Modifier.fillMaxSize().padding(horizontal = 12.dp)) {
            when (managerSelectedState){
                0 -> CarManagement()
                1 -> SpotManagement()
                2 -> OrderManagement()
                3 -> PointManagement()
            }
        }

    }
}

@Composable
fun UserIDCard(
    modifier: Modifier = Modifier,
    userID: String = "UID: 0000000000000000",
    userAvatarID: Int = R.drawable.ic_baseline_crop_original_48,
){
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(188.dp)
            .padding(top = 6.dp, bottom = 16.dp, start = 12.dp, end = 12.dp)
            .background(color = Teal200, shape = RoundedCornerShape(10.dp)),
        contentAlignment = Alignment.Center
    ) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Image(
                painter = painterResource(userAvatarID),
                contentDescription = userAvatar,
                modifier = Modifier
                    .clip(CircleShape)
                    .size(88.dp)
                    .alpha(0.8f),
            )
            Text(
                modifier = Modifier
                    .padding(top = 12.dp)
                    .background(
                        MaterialTheme.colors.surface.copy(alpha = 0.25f),
                        shape = RoundedCornerShape(3.dp)
                    ),
                text = userID,
                fontSize = 10.sp,
                color = MaterialTheme.colors.onSurface.copy(alpha = 0.46f)
            )
        }
    }
}

@Composable
fun Manager(
    selectedPosition: Int,
    onItemSelected: (position: Int, item: BottomItem) -> Unit
){
    Row(modifier = Modifier
        .fillMaxWidth()
        .height(76.dp)
        .background(
            color = MaterialTheme.colors.surface.copy(0.9f),
            shape = RoundedCornerShape(8.dp)
        )
        .padding(horizontal = 2.dp)
        .shadow(3.dp, RoundedCornerShape(3.dp)),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center
    ){
        mManagerItems.forEachIndexed { index, bottomItem ->
            val isSelected = selectedPosition == index
            Box(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxSize()
                    .clickable(
                        onClick = {
                            onItemSelected.invoke(index, bottomItem)
                        },
                        indication = null,
                        interactionSource = remember {
                            MutableInteractionSource()
                        }
                    )
                    .background(MaterialTheme.colors.surface),
                contentAlignment = Alignment.Center
            ) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Icon(
                        painter = painterResource(bottomItem.Res),
                        contentDescription = "",
                        tint = MaterialTheme.colors.primary
                    )
                    Text(
                        text = bottomItem.label,
                        fontSize = 12.sp,
                        color = MaterialTheme.colors.onSurface.copy(alpha = 0.85f)
                    )
                }
            }
        }
    }
}